關於PixiJS

下面文字是官網裡對於 Pixi.js 特性的說法：

Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile. Helping Goodboy and hopefully you achieve the big fat goal of “Build once, play everywhere

他們強調因為Pixi.js支援WebGL的關係，使得Pixi.js的效能表現大大超過過往使用svg做網頁遊戲的效能。詳細比較及實驗數據請參見：突破 D3.js 的速度極限 — 2D WebGL 與 PIXI.js

Pixi.js是一個基於Javascript的2D繪圖引擎，主要是做網頁的2D遊戲，可兼容多種瀏覽器（所支援的瀏覽器版本請參見：What browsers are supported?），但即便是不支援WebGL的瀏覽器，PixiJS也可以正常運行，只是效能會變得差很多，因為沒辦法享受到GPU加速的優勢。

由於Pixi.js的主要開發者過去曾經寫過flash，若是曾經開發過flash的developer，在學習pixi.js時，會感到格外親切。

在Pixi.js裡主要的單張圖片使用的class名稱為Sprite，而動畫則為MovieClip。其他如addChild()、removeChildren()、play()、gotoAndStop()、gotoAndPlay()等API的名稱都與flash的語法十分相近。過往的flash developer很容易便能夠透過IDE裡auto complete的功能去找到想要使用的功能。

Pixi.js只有提供關於使用WebGL的圖像處理API以及動畫控制元件，並不一定要我們遵循特定的方式（如：TypeScript、粒子系統）等去做開發。這也是它一個優點，我們可以很自由的去依據自己專案的需求去選擇我們要使用的配套方案。

相關技術 – Phaser

Phaser是一個基於Pixi.js去開發的遊戲框架，雖然Phaser是使用較舊版本的PixiJS為基準，並且我們難以自行將其所使用的PixiJS更新到最新版，而新版的PixiJS提供了更多的功能以及更好的效能。
但是Phaser可以讓我們在開發遊戲時更能夠遵循一致的規範，並且它為我們把許多好用的遊戲開發功能都整合進去，例如粒子系統等。

Phaser額外為Pixi添加了下面的內容：

• 物理系統的選擇(arcade或full body)
• 一個遊戲世界和一個可以平移它的鏡頭
• Tilemap支持
• 粒子系統
• 聲音支持
• 更高級的輸入處理
• 鍵盤和遊戲手柄輸入
• Scale Manager可以處理遊戲/場景調整大小+全營幕支持
• 為Tween物件增加Tween Manager, 使其與核心時間一致
• 素材載入管理
• 遊戲狀態管理
• 遊戲時鐘+自定義計時器+計時器事件

Source:Decide Pixi.js or Phaser

相關技術 – ThreeJS

three.js是另一個可以使用WebGL的3D Javascript遊戲引擎。主要與pixiJS不同的是它是一個3D引擎，而pixiJS主要強項則是產生2D的遊戲。ThreeJS可以讓我們用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。

ThreeJS可以與pixiJS做結合，不過由於3D遊戲是由一個攝影機去做投影，因此投影出來的多個物件會在同一層裡。2D的畫面會永遠在3D物件之上（或之下）而無法交疊出現（以同一個Canvas來說）

這裡是一個將PixiJS結合ThreeJS的範例：https://codepen.io/NEWREBEL/pen/OObLyE

學習PixiJS的好用資源

• PixiJS API Documentation：裡面有詳細的API手冊，搭配example去學習pixi可以讓上手速度更快速。
• PixiJS Examples：大部份我們要用PixiJS開發遊戲會需要用到的技術都有很簡單的範例在裡面。
  比較特別的是，Example Code的地方是可以動態修改，然後按上面重整的圖示，就可以即時看到你所修改的東西呈現的樣子，可以讓我們很方便的做測試。
• Pixi.js官方論壇：我們公司使用PixiJS開發web game已經兩年多了，在這之間遇到難解的怪問題時，這個論壇是一個很好的平台。pixi的主要開發者在論壇裡算是很活躍也很樂於回答我們的問題。他們也會在解惑時提到很多他們建議的開發方式。
• Pixi教程：一個基於官方英文教學文件的中文翻譯

使用PixiJS開發的作品

這篇介紹的很詳細：[PixiJS – Day-03] 使用 PixiJS 製作的網站，也許並不少

相關資料

• Pixi.js 中文教學
• [PixiJS – Day-02] 關於 PixiJS
• Decide Pixi.js or Phaser